<template>
  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
    <template v-if="hasOneShowingChild(item) && !onlyOneChild.children && !item.alwaysShow">
      <template v-if="onlyOneChild.path.indexOf('http') === 0">
        <a :target="onlyOneChild.meta && onlyOneChild.meta.isOpen === true ? '_blank' : '_self'" :href="onlyOneChild.path">
          <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
            <el-icon  class="menu-icon">
              <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
            </el-icon>
            <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title">{{onlyOneChild.meta.title}}</span>
          </el-menu-item>
        </a>
      </template>
      <template v-else>
        <router-link :target="onlyOneChild.meta && onlyOneChild.meta.isOpen === true ? '_blank' : ''" :to="onlyOneChild.fullpath || onlyOneChild.path">
          <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
            <el-icon  class="menu-icon">
              <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
            </el-icon>
            <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title">{{onlyOneChild.meta.title}}</span>
          </el-menu-item>
        </router-link>
      </template>
    </template>

    <template v-else>
      <template v-if="item.meta&&item.meta.top&&item.children[0]">
        <el-sub-menu :index="item.children[0].name||item.children[0].path">
          <template v-slot:title>
            <el-icon  class="menu-icon">
              <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
            </el-icon>
            <span v-if="item.children[0].meta&&item.children[0].meta.title">{{item.children[0].meta.title}}</span>
          </template>

          <template v-for="child in item.children[0].children">
            <template  v-if="!child.hidden">
              <template v-if="child.children&&child.children.length>0">
                <sidebar-item :is-nest="true" class="nest-menu" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
              </template>
              <template v-else>
                <template v-if="child.path.indexOf('http') === 0">
                  <a :target="child.meta && child.meta.isOpen === true ? '_blank' : '_self'" :href="child.path" :key="child.name">
                    <el-menu-item :index="resolvePath(child.path)" :class="{'submenu-title-noDropdown':!isNest}">
                      <el-icon  class="menu-icon">
                        <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
                      </el-icon>
                      <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
                    </el-menu-item>
                  </a>
                </template>
                <template v-else>
                  <router-link :target="child.meta && child.meta.isOpen === true ? '_blank' : ''" :to="child.fullpath || child.path" :key="child.name">
                    <el-menu-item :index="resolvePath(child.path)">
                      <el-icon  class="menu-icon">
                        <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
                      </el-icon>
                      <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
                    </el-menu-item>
                  </router-link>
                </template>
              </template>
            </template>
          </template>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-sub-menu :index="item.name||item.path">
          <template v-slot:title>
            <el-icon  class="menu-icon">
              <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
            </el-icon>
            <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
          </template>

          <template v-for="child in item.children">
            <template  v-if="!child.hidden">
              <template v-if="child.children&&child.children.length>0">
                <sidebar-item :is-nest="true" class="nest-menu" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
              </template>
              <template v-else>
                <template v-if="child.path.indexOf('http') === 0">
                  <a :target="child.meta && child.meta.isOpen === true ? '_blank' : '_self'" :href="child.path" :key="child.name">
                    <el-menu-item :index="resolvePath(child.path)" :class="{'submenu-title-noDropdown':!isNest}">
                      <el-icon  class="menu-icon">
                        <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
                      </el-icon>
                      <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
                    </el-menu-item>
                  </a>
                </template>
                <template v-else>
                  <router-link :target="child.meta && child.meta.isOpen === true ? '_blank' : ''" :to="child.fullpath || child.path" :key="child.name">
                    <el-menu-item :index="resolvePath(child.path)">
                      <el-icon  class="menu-icon">
                        <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
                      </el-icon>
                      <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
                    </el-menu-item>
                  </router-link>
                </template>
              </template>
            </template>
          </template>
        </el-sub-menu>
      </template>
    </template>

  </div>
</template>

<script>
import path from 'path'

export default {
  name: 'SidebarItem',
  props: {
    // route配置json
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      onlyOneChild: null
    }
  },
  created() {
  },
  methods: {
    hasOneShowingChild(itemR) {
      const children = itemR.children
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false
        } else {
          this.onlyOneChild = item
          return true
        }
      })
      if (itemR.meta && itemR.meta.top && showingChildren.length === 1) {
        return true
      }
      return false
    },
    resolvePath(...paths) {
      return path.resolve(this.basePath, ...paths)
    }
  }
}
</script>
